<script setup>
import {getCurrentInstance, ref} from 'vue';
// 导入pinia
import useStore from '@/store';

const {user} = useStore();
// 导入路由
import {useRoute} from 'vue-router';
import {ElMessage} from 'element-plus';

const route = useRoute();
const {proxy} = getCurrentInstance();
// 判断验证码登录还是密码属性
const isCodeLogin = ref(false);
// 登录信息
const loading = ref(false);
// 登录注册表单信息
const formData = ref({
  username: 'admin',
  password: '123456',
  code: ''
});
const sendCodeTime = ref(60)
const countdownInterval = ref(null)
const isCountdownActive = ref(false)
const rules = ref({
  username: [{required: true, message: "请输入手机号", trigger: ["blur", "input"]}],
  password: [{required: true, trigger: ["blur", "input"], message: "请输入密码"}],
  code: [{required: true, message: "请输入验证码", trigger: ["blur", "input"]}]
})
// 登录事件
const handlerLogin = async () => {
  // 判断是登陆还是注册
  proxy.$refs.formRef.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      try {
        isCodeLogin.value ? await user.loginCode(formData.value) : await user.login(formData.value)
      } catch (err) {
      } finally {
        loading.value = false
      }
    }
  });
};
// 验证码开始
const startCountdown = async () => {
  try {
    if (!formData.value.username) return ElMessage.error("请输入手机号")
    await sendMesCode({phone: formData.value.username})
    isCountdownActive.value = true;
    ElMessage.success('已发送验证码');
    countdownInterval.value = setInterval(() => {
      sendCodeTime.value--;
      if (sendCodeTime.value === 0) {
        clearInterval(countdownInterval.value);
        sendCodeTime.value = 60;
        isCountdownActive.value = false;
      }
    }, 1000);
  } catch (e) {
  }

}
</script>
<template>
  <div class="main h-full bg-#253137">
    <!-- 登录界面 -->
    <div class="login_pannel flex flex-col bg-#fff">
      <!-- logo -->
      <div class="flex items-center">
        <img src="https://t11.baidu.com/it/u=2012053630,2960869158&fm=58" class="w-30px h-30px">
        <div class="text-30px font-bold ml-10px mr-10px">威澳视频</div>
      </div>
      <div class="text-24px mt-26px c-#000;">登录你的账户</div>
      <!-- 登录表单 -->
      <el-form :model="formData" ref="formRef" class="mt-25px" :rules="rules">
        <!-- 手机号 -->
        <el-form-item prop="username">
          <el-input v-model="formData.username" placeholder="请输入你的手机号">
            <template #prefix>
              <img src="@/assets/images/photo.png?rul" class="w-20px"/>
            </template>
          </el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item v-if="isCodeLogin" prop="code">
          <el-input v-model="formData.code" placeholder="手机验证码">
            <template #prefix>
              <img src="@/assets/images/code.png?rul" class="w-20px"/>
            </template>
            <template #suffix>
              <span class="c-#fb7701 mr-10px text-18px" v-if="isCountdownActive">{{ sendCodeTime }}秒</span>
              <span class="c-#fb7701 text-18px cursor-pointer" v-else @click="startCountdown">获取验证码</span>
            </template>
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password" v-else>
          <el-input v-model="formData.password" placeholder="请输入你的密码" show-password>
            <template #prefix>
              <img src="@/assets/images/code.png?rul" class="w-20px"/>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item class="mt-30px">
          <el-button color="#fb7701" class="w-100% h-57px text-20px c-#fff rounded-14px" @click="handlerLogin"
                     :loading="loading">登录
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 底部功能 -->
      <div class="flex justify-between text-18px">
        <div class="c-#c1c1c1">还没有账户? 点击登录<span class="c-#fb7701">自动注册</span></div>
        <div class="c-#fb7701 cursor-pointer" @click="isCodeLogin = !isCodeLogin">{{
            isCodeLogin ? '密码登录' : "验证码登录"
          }}
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
@import url(./index.scss);
</style>
